<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置指令</title>
    <script src="../js/vue.js"></script>
    <script>
        // 关闭vue生产模式提示
        Vue.config.productionTip = false
    </script>
    <style>
        /* 属性选择器 */
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 
        目前学过的内置指令
        v-bind  :
        v-model
        v-text
        v-html
            1、作用：向指定结点中渲染包含html结构中的内容，
            2、v-html可以识别html结构
            3、v-html有安全性问题
                容易导致xss攻击
                永远不要用在用户提交的内容上
        v-if  v-else-if  v-else
        v-for
        v-on  @
        v-show
        v-cloak  没有值
            本质上是一个特殊的属性，Vue实例对象创建完毕，并接管对应容器后，会删除v-cloak属性
            使用css配合v-cloak可以解决网速慢时候页面展示不出{{xxx}}的问题
        v-once 初次动态渲染之后，就变成静态数据
        v-pre 跳过当前节点的编译过程，vue不会去解析当前节点
            可以利用它跳过没有指令语法，没有插值语法的节点，会加快编译
     -->
    <div id="app">
        <h4 v-text="msg2"></h4>
        <h4 v-html="msg2"></h4>
        <hr>
        <b>v-cloak</b>
        <h2 v-cloak>{{name}}</h2>
        <hr>
        <b>v-once</b>
        <h4 v-once>初始值是：{{n}}</h4>
        <h4>当前的n值是：{{n}}</h4>
        <button @click="n++">点我加一</button>
    </div>
    <script>
        const vm = new Vue({
            data(){
                return {
                   msg:'尚硅谷',
                   msg2:'<i>你好</i>',
                   name:'谷粒学院',
                   n:2,
                }
            },
        }).$mount('#app')
    </script>

</body>
</html>